@extends('admin.layouts.layout')
@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-title">
                <h5>充值档位统计</h5>
            </div>
            <div class="ibox-content">
                <form class="form-horizontal " action="{{route('pay.grade')}}" method="post"
                      enctype="multipart/form-data">
                    {!! csrf_field() !!}
                    <table class="table-striped table-bordered table-hover table-condensed">
                        <tr class="b-group">
                            <td class="b-child" colspan="2">
                                <table class="table-striped table-bordered table-hover table-condensed"
                                       style="margin: 0px;">
                                    <tr class="b-group">
                                        <td>
                                            @include('widget.between_datetime',['showEndTime'=>true])
                                        </td>
                                        <td>
                                            @include('widget.query_and_refresh')
                                        </td>
                                        <td>
                                            @include('widget.dataType')
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;<input type="checkbox" checked="checked" value=""
                                                               onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:6.5rem;overflow-y:scroll;">
                                    @include('widget.channel')
                                </div>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;<input type="checkbox" checked="checked" value=""
                                                               onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:10rem;overflow-y:scroll;">
                                    @include('widget.server')
                                </div>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;<input type="checkbox" checked="checked" value=""
                                                               onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:10rem;overflow-y:scroll;">
                                    <table class="table-striped table-bordered table-hover table-condensed"
                                           style="margin: 0px;">
                                        <tr class="b-group">
                                            <td id="tdServers">
                                                <?php
                                                $html = '';
                                                foreach ($types as $value) {
                                                    $type_id = $value['type'];
                                                    $type_name = $value['type_name'];
                                                    $checked = '';

                                                    if (empty($reqType) || in_array($type_id, $reqType)) {
                                                        $checked = 'checked="checked"';
                                                    }

                                                    $html .= <<<EOF
                                                 <div class="col-sm-2" style="min-width: 20rem">
                                                 <label>
                                                        &emsp;$type_name
                                                        <input class="pull-left" type="checkbox" name="type[]" $checked
                                                               value="$type_id"></label></div>
EOF;
                                                }
                                                echo $html;
                                                ?>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <input type="hidden" name="page_size" value="{{$reqPageSize}}"/>
                </form>
                <table class="table table-striped table-bordered table-hover m-t-md text-center tblData"
                       data-toggle="table"
                       data-pagination="true">
                    <thead>
                    <tr>
                        <th class="text-center">类型</th>
                        <th class="text-center">总金额</th>
                        <th class="text-center">
                            购买次数<?php echo count($data) > 0 ? "(总次数:{$data[0]['total_pay_times']})" : ''; ?></th>
                        <th class="text-center">
                            <a href="javascript:;" data-toggle="tooltip" data-placement="top"
                               title="购买次数 / 总次数">购买次数占比</a>
                        </th>
                        <th class="text-center">
                            购买人数<?php echo count($data) > 0 ? "(总人数:{$data[0]['total_pay_users']})" : ''; ?></th>
                        <th class="text-center">
                            <a href="javascript:;" data-toggle="tooltip" data-placement="top"
                               title="购买人数 / 总人数">购买人数占比</a>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($data as $key => $item)
                        <tr>
                            <td>{{$item['item_name']}}</td>
                            <td>{{$item['amounts']}}</td>
                            <td>{{$item['pay_times']}}</td>
                            <td>{{$item['pay_times_rate']}}%</td>
                            <td>{{$item['pay_users']}}</td>
                            <td>{{$item['pay_users_rate']}}%</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>购买次数占比</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart-pay-times" style="height: 35rem"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>购买人数占比</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart-pay-users"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
    </script>
    <link href="{{loadEdition('/admin/css/plugins/datapicker/bootstrap-datepicker.css')}}" rel="stylesheet">
    <link href="{{loadEdition('/admin/js/plugins/bootstrap-table/bootstrap-table.min.css')}}" rel="stylesheet">
@endsection
@section('js')
    <script src="{{loadEdition('/admin/js/plugins/datapicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{loadEdition('/admin/js/plugins/datapicker/bootstrap-datepicker.zh-CN.js')}}"></script>

    <script src="{{loadEdition('/admin/js/plugins/echarts/echarts.min.js')}}"></script>

    <script src="{{loadEdition('/admin/js/plugins/bootstrap-table/bootstrap-table.min.js')}}"></script>
    <script src="{{loadEdition('/admin/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js')}}"></script>

    <script src="{{loadEdition('/js/global.js')}}"></script>
    <script>
        //饼图
        echarts.init(document.getElementById('echarts-pie-chart-pay-times')).setOption({
            series: {
                type: 'pie',
                data: {!!$piePayTimes!!},
                label: {
                    alignTo: 'labelLine',
                },
            }
        });

        //柱状图
        echarts.init(document.getElementById('echarts-pie-chart-pay-users')).setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: '{a0}：{c0}%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: {!!$piePayUsersX!!},
                    axisTick: {
                        alignWithLabel: true
                    },
                    "axisLabel": {
                        interval: 0,
                        rotate: 40
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %',
                    },
                }
            ],
            series: [
                {
                    name: '占比',
                    type: 'bar',
                    barWidth: '60%',
                    data: {!!$piePayUsersData!!}
                }
            ]
        });
    </script>
@stop